<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>        

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/bootstrap4/js/bootstrap.js"></script>



<link href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css" rel="stylesheet" >

<div class="container">
	<!-- 查询条件 -->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	 <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
	  	<a class="navbar-brand" href="#">spu管理</a> 
	  </div>
	</nav>
	
	<div>
	    <form id="queryForm" class="form-inline">
		    <div class="form-group row">
		      	<label>名称</label>：<input class="form-control mr-sm-2" name="goodsName" value="${spuVo.goodsName}" aria-label="Search">
		        <label>标题</label>：<input class="form-control mr-sm-2" name="caption" value="${spuVo.caption}" aria-label="Search">
		      	<input type="hidden" name="page" id="page">	
		    </div>
		    <br>
		     <div class="form-group row">
		        <label>排序字段</label>：<select name="sortField">
		        	<option value="-1">请选择</option>
		        	<option value="0">商品名称</option>
		        	<option value="1">标题</option>
		        	<option value="2">上架与否</option>
		        </select>
		        <label>排序方式</label>：<select name="sortType">
		        	<option value="1">升序</option>
		        	<option value="0">降序</option>
		        </select>
		        <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="goPage(1)">搜索</button>
		      	<button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="toAdd()">添加</button>
	    	</div>
	    </form>
	</div>

	<table class="table">
		
		<tr>
			<td>id</td>
			<td>名称</td>
			<td>上架</td>
			<td>标题</td>
			<td>图片</td>
			<td>分类</td>
			<td>品牌</td>
			<td>操作</td>
			<td>sku管理</td>
		</tr>
		<c:forEach items="${pageInfo.list}" var="spu">
			<tr>
				<td>${spu.id}</td>
				<td>${spu.goodsName}</td>
				<td>${spu.isMarketable=="0"?"待售":"上架"}</td>
				<td>${spu.caption}</td>
				<td><img alt="" height="50" width="50" src="/pic/${spu.smallPic}"></td>
				<td>${spu.category.name}</td>
				<td>${spu.brand.name}</td>
				<td>
					<button type="button" class="btn btn-primary" onclick="update(${spu.id})">修改</button>
					<button type="button" class="btn btn-danger"  onclick="del(${spu.id})">删除</button>
				</td>
				<td>
					<button type="button" class="btn btn-primary" onclick="addSku(${spu.id})">添加sku</button>
				</td>
			</tr>
		</c:forEach>
		
	</table>
	<nav aria-label="...">
	  <ul class="pagination">
	    
	    <li class="page-item disabled">
	      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上页</a>
	    </li>
	    <c:forEach begin="1" end="${pageInfo.pages}" var="p">
	    
	    	<!-- 不同， 非当前页码-->
	    	<c:if test="${pageInfo.pageNum!=p}">
	   			<li class="page-item"><a class="page-link" href="javascript:goPage(${p})">${p}</a></li>
	   		</c:if>
	   		
	   		<!-- 相同 则表示的是当前页码 -->
	   		<c:if test="${pageInfo.pageNum==p}">
	   			<li class="page-item active" aria-current="page">
	      			<a class="page-link" href="javascript:goPage(${p})">${p}<span class="sr-only">(current)</span></a>
	    		</li>
	   		</c:if>
	    </c:forEach>  
	    
	    <li class="page-item">
	      <a class="page-link" href="#">下页</a>
	    </li>
	  </ul>
	</nav>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">添加Sku</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="addFormDiv">
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
	function goPage(page){
		$("#page").val(page)//设置要跳转的页面
		$("#workContent").load("../spu/list",$("#queryForm").serialize(),function(){
			alert("刷新成功")
		})
	}
	
	function toAdd(){
		$("#workContent").load("../spu/toadd")
	}
	//修改
	function update(id){
		$("#workContent").load("../spu/toupdate?id="+id)
	}
	//删除
	function del(id){
		if(confirm("确认删除该数据么？")){
			var ids = new Array();
			ids.push(id);
			$.post("../spu/delbatch",{ids:ids},function(data){
				if(data.code==0){
					alert("删除成功")
					// 刷新
					//goPage(1);// 直接跳转到第一页 并且条件不改变
					
					// //要求页面不能跳转，条件也不能改变
						goPage("${pageInfo.pageNum}");
				}else{
					alert("删除失败")
				}
			})
		}
	}
	
	//添加Sku
	function addSku(spuId){
	//	alert(spuId)
		
		$("#addFormDiv").load("../sku/toadd",{spuId:spuId},function(){
			$("#staticBackdrop").modal("show")
		}) 
	}
</script>
